Ext.define('Seq.echarts.Timeline', {
    extend: 'Seq.echarts.Base',
    xtype: 'echartstimeline',

    option: {
        baseOption: {
            timeline: {
                axisType: 'category',
                autoPlay: false,
                playInterval: 1000,
                controlStyle: {
                    position: 'left'
                },
                symbol: 'none',
                label: {
                    formatter: function (s) {
                        let hour = parseInt(s.substr(0, 2)), mi = parseInt(s.substr(3, 2));
                        return mi === 0 && (hour % 2) === 0 ? s : ' ';
                    }
                },
                data: ['02:15', '02:30', '02:45', {
                    value: '03:00',
                    tooltip: {
                        formatter: '{b}'
                    },
                    symbol: 'emptyCircle'
                },
                    '03:15', '03:30', '03:45', {
                        value: '04:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '04:15', '04:30', '04:45', {
                        value: '05:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '05:15', '05:30', '05:45', {
                        value: '06:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '06:15', '06:30', '06:45', {
                        value: '07:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'diamond',
                        symbolSize: 16,
                    },
                    '07:15', '07:30', '07:45', {
                        value: '08:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '08:15', '08:30', '08:45', {
                        value: '09:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '09:15', '09:30', '09:45', {
                        value: '10:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '10:15', '10:30', '10:45', {
                        value: '11:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '11:15', '11:30', '11:45', {
                        value: '12:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '12:15', '12:30', '12:45', {
                        value: '13:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '13:15', '13:30', '13:45', {
                        value: '14:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '14:15', '14:30', '14:45', {
                        value: '15:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '15:15', '15:30', '15:45', {
                        value: '16:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '16:15', '16:30', '16:45', {
                        value: '17:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '17:15', '17:30', '17:45', {
                        value: '18:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'diamond',
                        symbolSize: 16,
                    },
                    '18:15', '18:30', '18:45', {
                        value: '19:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '19:15', '19:30', '19:45', {
                        value: '20:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '20:15', '20:30', '20:45', {
                        value: '21:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '21:15', '21:30', '21:45', {
                        value: '22:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '22:15', '22:30', '22:45', {
                        value: '23:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '23:15', '23:30', '23:45', {
                        value: '00:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '00:15', '00:30', '00:45', {
                        value: '01:00',
                        tooltip: {
                            formatter: '{b}'
                        },
                        symbol: 'emptyCircle'
                    },
                    '01:15', '01:30', '01:45']
            }
        }
    },

    onTimelineChanged(e) {
        let me = Ext.fly(this._dom.id).component;
        me.fireEvent('timelinechanged', me, e.currentIndex);
    },

    listeners: {
        afterrender(cmp) {
            cmp.on('resize', (me) => {
                me.echart && me.echart.resize({width: me.getWidth(), height: me.getHeight()});
            });
        },

        afterinit(cmp) {
            cmp.echart.on('timelinechanged', cmp.onTimelineChanged);
        }

    }
})